<template>
  <div>
    <div class="main-container">
      <!-- 左侧核心模块 -->
      <div class="left-section">
        <div class="section-header">
          <h3 class="section-title">项目</h3>
          <i class="el-icon-refresh refresh-icon"></i>
        </div>

        <div class="section-card">
          <div class="form-row">
            <label class="label">项目名称</label>
            <el-select
              v-model="formData.projectId"
              filterable
              placeholder="请选择"
              clearable
              @change="onChangeProduct"
            >
              <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.projectName"
                :value="item.id"
              />
            </el-select>
          </div>

          <div class="form-row">
            <label class="label">参数</label>
            <el-input
              type="text"
              class="input-text"
              v-model="paramsData"
              :disabled="!formData.projectId"
            ></el-input>
            <el-button size="mini" class="btn-modify" @click="onUpdateData"
              >修改</el-button
            >
          </div>
        </div>

        <div class="section-card">
          <div class="card-title">核心指标</div>
          <div class="data-grid">
            <div class="data-item">
              <label class="label">接通率</label>
              <span class="value">{{ projectFormData.answerRate || 0 }}</span>
            </div>
            <div class="data-item">
              <label class="label">呼损率</label>
              <span class="value">0</span>
            </div>
            <div class="data-item">
              <label class="label">成功率</label>
              <span class="value">0</span>
            </div>
            <div class="data-item">
              <label class="label">转接成功率</label>
              <span class="value">0</span>
            </div>
          </div>
        </div>

        <div class="section-card">
          <div class="card-title">客户状态</div>
          <div class="data-grid">
            <div class="data-item">
              <label class="label">客户数</label>
              <span class="value">{{
                projectFormData.yihuCustomerNumer || 0
              }}</span>
            </div>
            <div class="data-item">
              <label class="label">应答数</label>
              <span class="value">{{ projectFormData.answerNumer || 0 }}</span>
            </div>
            <div class="data-item status-red">
              <label class="label">队列</label>
              <span class="value">0</span>
            </div>
            <div class="data-item status-green">
              <label class="label">签入</label>
              <span class="value">0</span>
            </div>
            <div class="data-item status-green">
              <label class="label">空闲</label>
              <span class="value">0</span>
            </div>
            <div class="data-item status-red">
              <label class="label">忙碌</label>
              <span class="value">0</span>
            </div>
            <div class="data-item status-orange">
              <label class="label">事务</label>
              <span class="value">0</span>
            </div>
            <div class="data-item">
              <label class="label">最大等待</label>
              <span class="value">00:00:00</span>
            </div>
            <div class="data-item">
              <label class="label">大于1分钟</label>
              <span class="value">0</span>
            </div>
          </div>
        </div>

        <div class="section-card">
          <div class="card-title">发布公告</div>
          <el-input
            type="textarea"
            class="notice-textarea"
            placeholder="输入公告内容..."
          ></el-input>
          <el-button size="small" class="btn-publish">发布</el-button>
        </div>
      </div>

      <div class="divider"></div>
      <div class="middle-section"></div>
      <div class="divider"></div>
      <div class="right-section"></div>
    </div>
  </div>
</template>

<script>
import { projectList } from "@/api/projectManagement/list";
import { gerProjectForms } from "@/api/taskManagement/taskList.js";
import { updateProject } from "@/api/projectManagement/list.js";
import { onUpdated } from "vue";
export default {
  name: "realMonitoring",
  data() {
    return {
      loading: false,
      tableData: [], //表格数据
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      formData: {
        questionText: "",
      },
      voiceTypeList: [],
      rules: {
        questionText: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      productList: [],
      checkList: ["选中且禁用", "复选框 A"],
      total: 0,
      realMonitoringShow: false,
      projectFormData: { answerRate: 0, answerNumer: 0 },
      paramsData: "",
      currentId: "",
    };
  },

  created() {
    this.getProductList();
  },
  methods: {
    onChangeProduct(event) {
      this.currentId = event;
      this.paramsData = "";
      this.getList(event);
    },
    // 项目列表
    async getList(id) {
      const params = {
        projectId: id,
      };

      const { code, data } = await gerProjectForms(params);
      if (code === 200) {
        this.projectFormData = data;
        this.paramsData = data.param || "";
      }
    },

    async onUpdateData() {
      const params = {
        projectName: "", //项目名称
        businessType: "", //业务类型
        outboundType: "", //外呼类型
        param: this.paramsData, //参数
        outboundLine: "", //外呼线路
        seats: "", //坐席
        lineTimeOut: 0, //排队超时
        callTimeOut: 0, //
        id: this.currentId,
      };
      const { code ,msg} = await updateProject(params);
      if(code === 200){
        this.$message.success(msg);
      }
    },

    // 保存
    onSubmit() {},

    // 项目列表
    async getProductList() {
      const params = {
        status: "",
        projectName: "",
        pageNum: 1,
        pageSize: 1000,
      };
      const { code, rows } = await projectList(params);
      if (code === 200) {
        this.productList = rows;
      }
    },

    handleClose() {
      this.realMonitoringShow = false;
      this.$emit("onCloseRecoverDataDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
/* 全局三列布局容器 */
.main-container {
  display: flex;
  min-height: 100vh; /* 占满视口高度 */
  padding: 0 24px;
}

/* 中间/右侧模块（留空） */
.middle-section,
.right-section {
  flex: 1; /* 占据剩余空间 */
}

/* 垂直分隔线 */
.divider {
  width: 1px;
  background: #e5e7eb;
  margin: 0 24px; /* 分隔线与模块的间距 */
}

/* 以下为左侧模块原有样式（与之前优化保持一致） */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 2px solid #e5e7eb;
}
.section-title {
  margin: 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 600;
}
.refresh-icon {
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s;
}
.refresh-icon:hover {
  color: #374151;
}

.section-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 20px;
  margin-bottom: 20px;
}
.card-title {
  color: #374151;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.label {
  width: 80px;
  text-align: right;
  color: #475569;
  font-size: 14px;
}
.input-select,
.input-text {
  flex: 1;
  padding: 8px 12px;
  //   border: 1px solid #e5e7eb;
  //   border-radius: 6px;
  //   font-size: 14px;
  //   background: white;
}
.input-select:focus,
.input-text:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.btn-modify,
.btn-publish {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-modify {
  background: #3b82f6;
  color: white;
}
.btn-modify:hover {
  background: #2563eb;
}
.btn-publish {
  background: #22c55e;
  color: white;
  width: 100%;
  margin-top: 12px;
}
.btn-publish:hover {
  background: #16a34a;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.data-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  background: #f8fafc;
}
.data-item .value {
  color: #1e293b;
  font-weight: 500;
}

.status-red .label,
.status-red .value {
  color: #ef4444;
}
.status-green .label,
.status-green .value {
  color: #22c55e;
}
.status-orange .label,
.status-orange .value {
  color: #f59e0b;
}

.notice-textarea {
}
.notice-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* 全局布局调整 */
.main-container {
  margin-top: 20px;
  display: flex;
  padding: 0 24px;
  min-width: 1200px; /* 限制最小宽度防止内容挤压 */
}

/* 左侧栏优化 */
.left-section {
  flex: 0 0 415px; /* 调整为更紧凑的320px */
  min-width: 415px;
  box-sizing: border-box; /* 包含边框和内边距计算 */
}

/* 分隔线调整 */
.divider {
  width: 1px;
  background: #e5e7eb;
  margin: 0 16px; /* 缩小分隔线间距 */
}

/* 卡片内容宽度限制 */
.section-card {
  padding: 16px; /* 减少内边距 */
  box-sizing: border-box; /* 关键：防止内边距导致宽度溢出 */
}

/* 表单行优化 */
.form-row {
  gap: 8px; /* 缩小元素间距 */
  margin-bottom: 12px;
}
.label {
  width: 70px; /* 缩小标签宽度 */
  font-size: 13px;
}
.input-select,
.input-text {
  flex: 1;
  padding: 6px 10px; /* 减少输入框内边距 */
  font-size: 13px;
  max-width: calc(100% - 80px); /* 限制最大宽度防止溢出 */
}
.btn-modify {
  padding: 6px 12px; /* 缩小按钮尺寸 */
  font-size: 13px;
}

/* 数据网格优化 */
.data-grid {
  grid-template-columns: repeat(2, 1fr); /* 改为2列布局更紧凑 */
  gap: 12px; /* 缩小网格间距 */
}
.data-item {
  padding: 8px 12px; /* 减少数据项内边距 */
  gap: 6px;
}
.data-item .label {
  width: auto; /* 标签宽度自适应 */
  font-size: 13px;
}
.data-item .value {
  font-size: 13px;
}

/* 公告模块优化 */
.notice-textarea {
  height: 100px; /* 缩小文本域高度 */
  padding: 8px 12px;
  font-size: 13px;
}
.btn-publish {
  padding: 8px 12px;
  font-size: 13px;
}

/* 标题栏调整 */
.section-header {
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.section-title {
  font-size: 18px;
}
.refresh-icon {
  font-size: 16px;
}

/* 卡片标题调整 */
.card-title {
  font-size: 15px;
  margin-bottom: 12px;
  padding-bottom: 6px;
}
</style>
